$("#desText").click(function() {
    $(".desOrdis").html(` <p>
                当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用 户，还是专业网站制作人员，都能设计出最具专业水准的网站。当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。
            </p>
            <p style="margin-top: 10px;padding-bottom:30px">
                当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用 户，还是专业网站制作人员，都能设计出最具专业水准的网站。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网 站制作和维护成为一件轻松惬意的事。
            </p>`).css({
        "color": "#808080",
        "font-size": "12px",
        "text-indent": "2em",
        "border-top": "none"
    });
    $("#disText").css({
        "color": "#777",
        "border-top": "4px solid #fff"
    });
    $("#desText").css({
        "border-top": " 4px solid #333333",
        "color": "#000"
    });
});
$("#disText").click(function() {
    $(".desOrdis").html(`
    <p style="padding:20px 0px">目前还未有评论<br>只有买过此商品的客户登录后才能发表评论</p>
    `).css({
        "color": "#666",
        "font-size": "16px",
        "text-indent": "0em",
        "border-top": "3px solid #eeeeee",
    });
    $("#desText").css({
        "color": "#777",
        "border-top": "4px solid #fff"
    });
    $("#disText").css({
        "border-top": " 4px solid #333333",
        "color": "#000"
    })
});

// 获取商品列表

function getTypeId() {
    return location.search.split("=")[1];
}

function getGoodsInfo() {
    $.get("php/getGoodsInfo.php", {
            // "goodsId": "001003"
            "goodsId": getTypeId()
        },
        function(data) {
            // console.log("typeof data", typeof data);
            // console.log("data", data);
            let htmlStr = "";

            htmlStr += `
            <li>
                    <h1>${data.goodsName}</h1>
                </li>
                <li class="line"></li>
                <li class="price-inner">¥${data.goodsPrice}</li>
                <li class="description">
                    <p>${data.goodsDesc}</p>
                </li>
                <li class="prop">
                    <a href="goodsCart.html?goodsId=${data.goodsId}">
                    <input value="加入购物车" type="button" class="addcart"></a>
                    <input type="button" value="－" class="reduce comm" id="reduce" />
                    <input value="1" class="count comm">
                    <input type="button" value="＋" class="add comm" /></li>
                <li class="goodsnum">商品编号：${data.goodsId}</li>
                <li class="goodsType">分类：${data.goodsType}, ${data.beiyong1}</li>
        `;
            $(".cupRight ul").html(htmlStr);

            //放大镜的背景图
            $(function() {
                $("#small-box").css({
                    "background-image": `url(${data.goodsImg})`
                });
                $("#big-box").css({
                    "background-image": `url(${data.goodsImg})`
                })
            });
            //详情小图
            let htmlStr1 = "";
            htmlStr1 += `<a href="#"><img src="${data.goodsImg}" alt="" style="width: 50px;height: 50px;"></a>`;
            $(".detail-box").html(htmlStr1);

            //加减按钮
            $("#reduce").click(function() {
                changeNum(this, "-")
            });

            $(".add").click(function() {
                changeNum(this, "+")
            });
        }, "json")
}

$(function() {
    // 获取商品信息
    getGoodsInfo();
});


// 修改数字
function changeNum(obj, operator) {
    // 1、获取原来的数字和价格
    let num = obj.parentNode.querySelector(".count").value;

    // 2、修改数量
    operator == "+" ? num++ : num--;
    num = num < 0 ? 0 : num;

    // 3、3、把结果显示在界面上
    // 1）、修改数量
    obj.parentNode.querySelector(".count").value = num;
    // 2）、修改小计
}